<script lang="ts" setup>
import {ref} from 'vue'

const input1 = ref('')
const input2 = ref('')
const input = ref('')
</script>
<template>

  <p>
    <el-input
        v-model="input"
        style="width: 240px"
        type="password"
        placeholder="Please input password"
        show-password
    />


    <el-input
        v-model="input1"
        style="width: 240px"
        placeholder="Pick a date"
        suffix-icon="Calendar"
    />
    <el-input
        v-model="input2"
        style="width: 240px"
        placeholder="Type something"
        prefix-icon="Search"
    />
  </p>
  <hr>
  <p>
    <Edit style="width: 1em; height: 1em; margin-right: 8px"/>
    <User style="width: 1em; height: 1em; margin-right: 8px"/>
    <Lock style="width: 1em; height: 1em; margin-right: 8px"/>

    <el-icon>
      <DeleteFilled/>
    </el-icon>
  </p>
  <hr>
  <p>
    <el-icon class="is-loading" style="color:red">
      <Edit/>
    </el-icon>

    <el-icon :size="50" class="is-loading">
      <loading/>
    </el-icon>
  </p>
  <el-button type="danger" icon="edit">编辑</el-button>

  <p>
    with extra class <b>is-loading</b>, your icon is able to rotate 360 deg in 2
    seconds, you can also override this
  </p>
  <el-icon :size="20">
    <Edit/>
  </el-icon>
  <el-icon color="#409efc" class="no-inherit">
    <Share/>
  </el-icon>
  <el-icon>
    <Delete/>
  </el-icon>
  <el-icon class="is-loading">
    <Loading/>
  </el-icon>
  <el-button type="primary">
    <el-icon style="vertical-align: middle">
      <Search/>
    </el-icon>
    <span style="vertical-align: middle"> Search </span>
  </el-button>
</template>
